/*
 * @Author: didididijiajiajia 11643763+didididijiajiajia@user.noreply.gitee.com
 * @Date: 2023-08-23 17:01:05
 * @LastEditors: didididijiajiajia 11643763+didididijiajiajia@user.noreply.gitee.com
 * @LastEditTime: 2023-09-02 21:15:09
 * @FilePath: \vue低代码101-111\low_code\src\components\home\menu.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

// 顶部菜单功能块
import { defineComponent,ref } from "vue";
import { ElButton, useFocus } from "element-plus"
import { useCommand } from "../../utils/useCommand"
import { $dialog } from "../commons/dialog";
import { $setPage } from "../commons/setPage";

export default defineComponent({
    props: {
        data: Object,
        focusData: Object,
        modelValue: { type: Object },
    },
    setup(props,ctx) {
        // const {clearBlockFocus} =useFocus(props.data)
        //开启或者关闭预览
    const changePreview=()=>{
        props.modelValue.value=!props.modelValue.value
    }
    // const editorRef = ref(true)
        const { commands } = useCommand(props.data,props.focusData) //命令[]
   
        return () => {
            return (<div>
                <ElButton onClick={e => $setPage({
                    title: "设置页面大小",
                    footer: true,
                    onConfirm(text) {
                        props.data.value.container = text
                    }
                })}>设置页面大小</ElButton>
                <ElButton onClick={e => commands.undo()}>后退</ElButton>
                <ElButton onClick={e => commands.redo()}>前进</ElButton>
                <ElButton onClick={e => $dialog({
                    title: '导入json',
                    footer: true,
                    onConfirm(text) {
                        // props.data.value=JSON.parse(text)
                        commands.updateContainer(JSON.parse(text))
                    }
                })}>导入json</ElButton>
                <ElButton
                    onClick={e => $dialog({
                        title: '导出json',
                        content: JSON.stringify(props.data.value),
                    })}>导出json</ElButton>
                <ElButton onClick={e => commands.placeTop()}>置顶</ElButton>
                <ElButton onClick={e =>commands.placeBottom()}>置底</ElButton>
                <ElButton onClick={e =>commands.delete()}>删除</ElButton>
                <ElButton onClick={e => changePreview()}>{ props.modelValue.value?'预览':'编辑'}</ElButton>
                <ElButton onClick={e =>{
                    // editorRef.value=false 最后再加，太乱了，将canvas全屏，其他都隐藏
                }}>关闭</ElButton>
            </div>)
        }
    }
})